import React, { PureComponent } from 'react';

import { Input, Tabs, Row, Typography, Col, Button, Icon, Select, Form } from 'antd';

import { connect } from 'dva';
import router from 'umi/router';

const { Text } = Typography;

const FormItem = Form.Item;

const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');

const { TabPane } = Tabs;
const { Option } = Select;

const { Search } = Input;

@connect(state => ({
  pageModel: state.work,
  vote: state.vote,
}))
@Form.create()
export default class PageTop extends PureComponent {
  state = {
    expandForm: false,
    formQuery: {},
  };

  componentDidMount() {
    const { dispatch, category } = this.props;

    // 获取列表数据
    dispatch({
      type: 'work/fetch',
      payload: { category },
    });
  }

  // 根据查询条件搜索
  handleSearch = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;
      this.setState({
        formQuery: fieldsValue,
      });

      dispatch({
        type: 'work/fetch',
        payload: fieldsValue,
      });
    });
  };

  // 重置查询条件
  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    const { category } = this.props;

    this.setState({
      formQuery: { category },
    });
    dispatch({
      type: 'work/fetch',
      payload: {
        currentPage: 1,
        category: this.props.category,
      },
    });
  };

  // 切换搜索条件的展示方式
  toggleForm = () => {
    const self = this;
    this.setState({
      expandForm: !self.state.expandForm,
    });
  };

  // 搜索条件的展示方式———展开
  renderAdvancedForm = () => {
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      style: { marginBottom: 0 },
    };
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSearch} layout="horizontal">
        <Row type="flex" justify="space-around" align="middle">
          <Col md={20} sm={24}>
            <Row>
              <Col md={6} sm={24}>
                <FormItem {...formItemLayout} label="产品构成">
                  {getFieldDecorator('no')(
                    <Select size="small" defaultValue="三房二厅">
                      <Option value="三房二厅">三房二厅</Option>
                      <Option value="三房一厅">三房一厅</Option>
                      <Option value="四房二厅">四房二厅</Option>
                      <Option value="四房一厅">四房一厅</Option>
                    </Select>,
                  )}
                </FormItem>
              </Col>
              {!this.props.category ? (
                <Col md={6} sm={24}>
                  <FormItem {...formItemLayout} label="房型">
                    {getFieldDecorator('category')(
                      <Select size="small" defaultValue="三房二厅">
                        <Option value="三房二厅">三房二厅</Option>
                        <Option value="三房一厅">三房一厅</Option>
                        <Option value="四房二厅">四房二厅</Option>
                        <Option value="四房一厅">四房一厅</Option>
                      </Select>,
                    )}
                  </FormItem>
                </Col>
              ) : (
                ''
              )}
              <Col md={6} sm={24}>
                <FormItem {...formItemLayout} label="房型">
                  {getFieldDecorator('status')(
                    <Select size="small" defaultValue="三房二厅">
                      <Option value="三房二厅">三房二厅</Option>
                      <Option value="三房一厅">三房一厅</Option>
                      <Option value="四房二厅">四房二厅</Option>
                      <Option value="四房一厅">四房一厅</Option>
                    </Select>,
                  )}
                </FormItem>
              </Col>
              <Col md={6} sm={24}>
                <FormItem {...formItemLayout} label="房型">
                  {getFieldDecorator('province')(
                    <Select size="small" defaultValue="三房二厅">
                      <Option value="三房二厅">三房二厅</Option>
                      <Option value="三房一厅">三房一厅</Option>
                      <Option value="四房二厅">四房二厅</Option>
                      <Option value="四房一厅">四房一厅</Option>
                    </Select>,
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col md={6} sm={24}>
                <FormItem {...formItemLayout} label="房型">
                  {getFieldDecorator('city')(
                    <Select size="small" defaultValue="三房二厅">
                      <Option value="三房二厅">三房二厅</Option>
                      <Option value="三房一厅">三房一厅</Option>
                      <Option value="四房二厅">四房二厅</Option>
                      <Option value="四房一厅">四房一厅</Option>
                    </Select>,
                  )}
                </FormItem>
              </Col>
              <Col md={6} sm={24}>
                <FormItem {...formItemLayout} label="房型">
                  {getFieldDecorator('area')(
                    <Select size="small" defaultValue="三房二厅">
                      <Option value="三房二厅">三房二厅</Option>
                      <Option value="三房一厅">三房一厅</Option>
                      <Option value="四房二厅">四房二厅</Option>
                      <Option value="四房一厅">四房一厅</Option>
                    </Select>,
                  )}
                </FormItem>
              </Col>
            </Row>
          </Col>
          <Col md={4} sm={24} justify="space-around" align="middle">
            <Button type="primary" onClick={this.handleDisableExport} htmlType="submit">
              查询
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
              重置
            </Button>
          </Col>
        </Row>
      </Form>
    );
  };

  // 选择搜索条件的展示方式
  renderForm = () => (this.state.expandForm ? this.renderAdvancedForm() : null);

  render() {
    const { params } = this.props.match;
    const activeKey = params.category;

    return (
      <>
        <div className="header-categories">
          <Tabs
            activeKey={activeKey}
            onChange={key => {
              router.push(
                `/OperatingPlan/ContractPlan/${params.level1}/${params.level2}/${params.project}/${params.stage}/${key}/${key}`,
              );
            }}
            size="large"
          >
            <TabPane tab="月度动态版" key="Dynamic"></TabPane>
            <TabPane tab="大定价版" key="GetPrice"></TabPane>
            <TabPane tab="战规版" key="WarPlan"></TabPane>
            <TabPane tab="投资版" key="CastDecision"></TabPane>
          </Tabs>
        </div>
        <div className="header-search-btns">
          <Button key="1" type="primary">
            编辑价格
          </Button>
          <Button onClick={this.toggleForm}>
            高级筛选
            {this.state.expandForm ? <Icon type="up" /> : <Icon type="down" />}
          </Button>
          <Search
            style={{ width: 200 }}
            placeholder="请输入关键字搜索"
            onSearch={value => console.log(value)}
            enterButton
          />
        </div>
        <div className="header-search-area">{this.renderForm()}</div>
        <Row className="header-version-area" type="flex" justify="space-around" align="middle">
          <Col md={4} className="version-selecter" sm={24}>
            <Select size="small" style={{ width: '100%' }} defaultValue="20190801-战规版-V1">
              <Option value="三房二厅">20190801-战规版-V1</Option>
              <Option value="三房一厅">20190801-战规版-V1</Option>
              <Option value="四房二厅">20190801-战规版-V1</Option>
              <Option value="四房一厅">20190801-战规版-V1</Option>
            </Select>
          </Col>
          <Col className="version-details" md={20} sm={24}>
            <Text className="version-status dot" strong>
              编制中
            </Text>
            &nbsp;
            <Text>(基于楼栋计划版本：20190801-战规版-V1，面积版本：20190801-战规版-V3编制)</Text>
          </Col>
        </Row>
      </>
    );
  }
}
